﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>范文亮 | Anson | Resume</title>
    <!-- Stylesheets -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3837427_sczmznoo7n.css">

    <!--Favicon-->
    <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
    <link rel="icon" href="images/favicon.png" type="image/x-icon">
    <!-- Responsive -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
    <!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
    <style>
        .bottom {
            width: 100vw;
            height: 50px;
            background-color: transparent;
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>

    <div class="page-wrapper default-version">

        <!-- Preloader -->
        <div class="preloader"></div>

        <div class="page-background">
            <div class="image-1"><img src="images/icons/shape/icon-1.png" alt=""></div>
            <div class="image-7"><img src="images/icons/shape/icon-7.png" alt=""></div>
            <canvas id="canvas"></canvas>
        </div>

        <!-- Mobile menu -->
        <div class="mobile-menu">
            <div class="container">
                <!--Nav Outer-->
                <div class="nav-outer clearfix">
                    <div class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div>
                    <!-- Main Menu -->
                    <nav class="main-menu">
                        <div class="navbar-header">
                            <!-- Toggle Button -->
                            <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <div class="navbar-collapse collapse scroll-nav clearfix">
                            <ul class="navigation clearfix">

                                <li class="current"><a href="#home">Home</a></li>
                                <li><a href="#about">介绍</a></li>
                                <li><a href="#resume">经历</a></li>
                                <!-- <li><a href="#services">Services</a></li> -->
                                <li><a href="#work">Works</a></li>
                                <!-- <li><a href="#blog">Blog</a></li> -->
                                <li><a href="#contact">联系</a></li>

                            </ul>
                        </div>
                    </nav>
                    <!-- Main Menu End-->
                </div>
                <!--Nav Outer End-->
            </div>
        </div>

        <div class="card-outer">
            <div class="scroll-box">
                <div class="container" data-animation-in="fadeInLeft" data-animation-out="fadeOutLeft">
                    <div class="card-wrapper">
                        <div class="author-info" style="background-image:url(images/background/3.jpg)">
                            <div class="image"><img src="images/resource/user.png" alt=""></div>
                            <div class="author">
                                <h3>范文亮</h3>
                                <div class="designation">
                                    <div class="typing-title">
                                        <p>Hi i’m a <strong>web developer.</strong></p>
                                        <p>我是一名<strong>前端开发。</strong></p>
                                    </div>
                                    <span class="typed-title"></span>
                                </div>
                            </div>
                            <div class="link-btn">
                                <!-- <a href="http://www.17sucai.com/" class="theme-btn btn-style-one">Download CV</a> -->
                            </div>
                            <ul class="social-icon-two">
                                <li><a href="#" title="fwl123698745"><span
                                            class="fa fa-facebook iconfont icon-weixin"></span></a></li>
                                <li><a href="#" title="1962903162"><span
                                            class="fa fa-twitter iconfont icon-QQ"></span></a></li>
                                <li><a href="https://gitee.com/fan_wenliang" title="码云"><span
                                            class="fa fa-google-plus8 iconfont icon-google-circle-fill"></span></a></li>
                                <li><a href="https://github.com/fan-wenliang"><span
                                            class="fa fa-pinterest iconfont icon-github-fill"></span></a></li>
                            </ul>
                        </div>
                        <div class="card-inner-box">
                            <header class="header wow fadeInLeft" data-wow-duration="1.5s">
                                <ul class="main-menu">
                                    <li class="active home"><a class="logo" href="#home"><img src="images/logo.png"
                                                alt=""></a></li>
                                    <li><a href="#about"><i class="flaticon-social"></i>介绍</a></li>
                                    <li><a href="#resume"><i class="flaticon-curriculum"></i>经历</a></li>
                                    <!-- <li><a href="#services"><i class="flaticon-layers-1"></i>Services</a></li> -->
                                    <li><a href="#work"><i class="flaticon-tools"></i>Works</a></li>
                                    <!-- <li><a href="#blog"><i class="flaticon-blog"></i>Blog</a></li> -->
                                    <li><a href="#contact"><i class="flaticon-send-mail"></i>联系</a></li>
                                </ul>
                            </header>

                            <!-- card item -->
                            <div class="card-home card-item active" id="home"
                                style="background-image:url(images/background/1.jpg)">

                                <div class="card-inner wow fadeInUp" data-wow-duration="2s">
                                    <div class="image"><img src="images/resource/user.png" alt=""></div>
                                    <div class="author">
                                        <h3>范文亮</h3>
                                        <div class="designation">
                                            <div class="typing-title">
                                                <p>Hi i’m a <strong>web developer.</strong></p>
                                                <p>我是一名<strong>前端开发。</strong></p>
                                            </div>
                                            <span class="typed-title"></span>
                                        </div>
                                    </div>
                                    <div class="text">最有希望的成功者，并不是才干出众的人而是那些最善利用每一时机去发掘开拓的人</div>
                                    <div class="link-btn">
                                        <!-- <a href="#" class="theme-btn btn-style-one">Download CV</a> -->
                                        <a href="#" class="theme-btn btn-style-two">Hire Me</a>
                                    </div>
                                    <ul class="social-icon-two">
                                        <li><a href="#" title="fwl123698745"><span
                                                    class="fa fa-facebook iconfont icon-weixin"></span></a></li>
                                        <li><a href="#" title="1962903162"><span
                                                    class="fa fa-twitter iconfont icon-QQ"></span></a></li>
                                        <li><a href="https://gitee.com/fan_wenliang" title="码云"><span
                                                    class="fa fa-google-plus8 iconfont icon-google-circle-fill"></span></a>
                                        </li>
                                        <li><a href="https://github.com/fan-wenliang"><span
                                                    class="fa fa-pinterest iconfont icon-github-fill"></span></a></li>
                                        <li><a href="#"><span
                                                    class="fa fa-dribbble iconfont icon-xinlangweibo"></span></a></li>
                                    </ul>
                                </div>

                            </div>
                            <!-- end item -->

                            <!-- card item -->
                            <div class="card-about card-item" id="about"
                                style="background-image:url(images/background/2.jpg)">
                                <div class="card-inner">
                                    <h4 class="title">简历</h4>
                                    <div class="text">最有希望的成功者，并不是才干出众的人而是那些最善利用每一时机去发掘开拓的人</div>
                                    <div class="info-list">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <ul class="list-style-one">
                                                    <li><strong>姓名:</strong> 范文亮(英:Anson)</li>
                                                    <li><strong>手机:</strong> 19159360236</li>
                                                    <li><strong>地址:</strong> 安徽-安庆</li>
                                                </ul>
                                            </div>
                                            <div class="col-md-6">
                                                <ul class="list-style-one">
                                                    <li><strong>Email:</strong> fwl1962903162@163.com</li>
                                                    <li><strong>状态:</strong> 离职-随时到岗</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <h4 class="title">技能</h4>
                                    <div class="row">
                                        <!-- About Block -->
                                        <div class="skill-block col-md-3 col-sm-4 col-xs-6">
                                            <div class="inner-box">
                                                <div class="graph-outer">
                                                    <input type="text" class="dial" data-fgColor="#9147ff"
                                                        data-bgColor="#f5f5f5" data-width="90" data-height="90"
                                                        data-linecap="normal" value="75">
                                                    <div class="inner-text count-box"><span class="count-text"
                                                            data-stop="75" data-speed="2000"></span>%</div>
                                                </div>
                                                <h3>HTML、CSS</h3>
                                            </div>
                                        </div>

                                        <!-- About Block -->
                                        <div class="skill-block col-md-3 col-sm-4 col-xs-6">
                                            <div class="inner-box">
                                                <div class="graph-outer">
                                                    <input type="text" class="dial" data-fgColor="#ff5e7e"
                                                        data-bgColor="#f5f5f5" data-width="90" data-height="90"
                                                        data-linecap="normal" value="75">
                                                    <div class="inner-text count-box"><span class="count-text"
                                                            data-stop="75" data-speed="2000"></span>%</div>
                                                </div>
                                                <h3>JS</h3>
                                            </div>
                                        </div>

                                        <!-- About Block -->
                                        <div class="skill-block col-md-3 col-sm-4 col-xs-6">
                                            <div class="inner-box">
                                                <div class="graph-outer">
                                                    <input type="text" class="dial" data-fgColor="#ffc713"
                                                        data-bgColor="#f5f5f5" data-width="90" data-height="90"
                                                        data-linecap="normal" value="75">
                                                    <div class="inner-text count-box"><span class="count-text"
                                                            data-stop="75" data-speed="2000"></span>%</div>
                                                </div>
                                                <h3>Vue </h3>
                                            </div>
                                        </div>

                                        <!-- About Block -->
                                        <div class="skill-block col-md-3 col-sm-4 col-xs-6">
                                            <div class="inner-box">
                                                <div class="graph-outer">
                                                    <input type="text" class="dial" data-fgColor="#51dbc3"
                                                        data-bgColor="#f5f5f5" data-width="90" data-height="90"
                                                        data-linecap="normal" value="75">
                                                    <div class="inner-text count-box"><span class="count-text"
                                                            data-stop="75" data-speed="2000"></span>%</div>
                                                </div>
                                                <h3>NodeJs </h3>
                                            </div>
                                        </div>

                                        <div>
                                            <ul style="margin-left: 20px;">
                                                <li>1.能使用 HTML5+CSS3，并结合 Sass/Less 等预处理器进行设计稿还原。</li>
                                                <li>2.熟悉百分比布局，rem布局，响应式布局适配各种手机和移动端浏览器。</li>
                                                <li>3.掌握原生JavaScript操作DOM,BOM元素。</li>
                                                <li>4.注重编程思维的培养，封装过简易组件，能独自模拟Promise的源码实现。</li>
                                                <li>5.工作中熟练各种流程工具和构建打包工具: Git、码云、Github、Webpack 包管理工具npm</li>
                                                <li>6.熟悉使用Ajax,axios技术实现前后端数据交互。</li>
                                                <li>7.熟悉使用BootStrap、Layui、Vant、Element-ui、Ant Design等前端主流组件库。</li>
                                                <li>8.熟悉使用Vue全家桶（vue、vuex、vue-router等）框架技术。</li>
                                                <li>9.有移动端，小程序，uniapp，后台管理系统开发经历。</li>
                                                <li>10.了解 React, node.js, express，mobx、原型链。</li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!-- end item -->

                            <!-- card item -->
                            <div class="card-resume card-item" id="resume"
                                style="background-image:url(images/background/2.jpg)">
                                <div class="card-inner">
                                    <h4 class="title">经历</h4>
                                    <div class="row clearfix">
                                        <!--Column-->
                                        <div class="timeline-column col-md-6 col-sm-12 col-xs-12">
                                            <div class="inner">
                                                <div class="col-header">
                                                    <div class="icon-box">
                                                        <div class="icon-inner">
                                                            <div class="icon"><span class="flaticon-book"></span></div>
                                                        </div>
                                                    </div>
                                                    <h2>学习</h2>
                                                </div>

                                                <!--Timeline Block-->
                                                <div class="timeline-block">
                                                    <div class="inner-box">
                                                        <h4>安徽工业大学工商学院</h4>
                                                        <div class="date"><span>2018/09-2022/07</span></div>
                                                        <div class="text">
                                                            学习C、C++、Java、Python、sql语言。利用Android、tomcat等制作app。1等奖学金、2等奖学金、3等奖学金、校三好学生2次、院系优秀毕业生。全国计算机等级二级证书、国家6级英语考试
                                                        </div>
                                                    </div>
                                                </div>

                                                <!--Timeline Block-->
                                                <!-- <div class="timeline-block">
                                                <div class="inner-box">
                                                    <h4>上海</h4>
                                                    <div class="date"><span>1998-2000</span> / University of stuties</div>
                                                    <div class="text">Exceptur sint occaecat cupidatat non proident sunt culpa. </div>
                                                </div>
                                            </div> -->

                                                <!--Timeline Block-->
                                                <!-- <div class="timeline-block">
                                                <div class="inner-box">
                                                    <h4>Specialization Course</h4>
                                                    <div class="date"><span>1998-2000</span> / University of stuties</div>
                                                    <div class="text">Exceptur sint occaecat cupidatat non proident sunt culpa. </div>
                                                </div>
                                            </div> -->

                                            </div>
                                        </div>

                                        <!--Column-->
                                        <div class="timeline-column col-md-6 col-sm-12 col-xs-12">
                                            <div class="inner">
                                                <div class="col-header">
                                                    <div class="icon-box">
                                                        <div class="icon-inner">
                                                            <div class="icon"><span class="flaticon-case"></span></div>
                                                        </div>
                                                    </div>
                                                    <h2>工作</h2>
                                                </div>

                                                <!--Timeline Block-->

                                                <div class="timeline-block">
                                                    <div class="inner-box">
                                                        <h4>web前端工程师/上海骁沐</h4>
                                                        <div class="date"><span>2022/07-2022/12 </span> </div>
                                                        <div class="text">
                                                            从0到1开发MAC会员中心小程序,用户量高达300百万。熟练运用了vue、Uniapp、原生微信开发、vuex。期间使用了Postman、Ps等工具进行辅助开发测试。
                                                            在后台管理系统的开发中，使用echarts、nprogress、swiper等多个插件。
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="timeline-block">
                                                    <div class="inner-box">
                                                        <h4>web前端工程师/上海梭翱</h4>
                                                        <div class="date"><span>2022/02-2022/07</span> </div>
                                                        <div class="text">开发微信小程序-许愿商城。引导用户使用，设计稿百分百完成，页面整体优化 </div>
                                                    </div>
                                                </div>

                                                <!-- <div class="timeline-block">
                                                <div class="inner-box">
                                                    <h4>Junior UI/UX Designer</h4>
                                                    <div class="date"><span>2006-2011 </span>  / airbnb inc.</div>
                                                    <div class="text">Exceptur sint occaecat cupidatat non proident sunt culpa. </div>
                                                </div>
                                            </div> -->

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <!-- end item -->
                            <!-- card item -->
                            <!-- end item -->
                            <!-- card item -->
                            <div class="card-projects card-item" id="work"
                                style="background-image:url(images/background/2.jpg)">
                                <div class="card-inner">
                                    <h4 class="title">Works</h4>
                                    <div class="row">
                                        <div class="projects-block col-md-6">
                                            <div class="inner-box">
                                                <figure class="image">
                                                    <img src="images/gallery/1.png" alt="image">
                                                    <div class="overlay">
                                                        <a class="lightbox-image option-btn" title="Image Caption Here"
                                                            data-fancybox-group="example-gallery"
                                                            href="images/gallery/1.png">
                                                            <i class="fa fa-search"></i>
                                                        </a>
                                                    </div>
                                                </figure>
                                                <div class="caption-title">
                                                    <h3><a href="#">M.A.C Love会员中心</a></h3>
                                                    <span>微信小程序</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="projects-block col-md-6">
                                            <div class="inner-box">
                                                <figure class="image">
                                                    <img src="images/gallery/2.png" alt="image">
                                                    <div class="overlay">
                                                        <a class="lightbox-image option-btn" title="Image Caption Here"
                                                            data-fancybox-group="example-gallery"
                                                            href="images/gallery/2.png">
                                                            <i class="fa fa-search"></i>
                                                        </a>
                                                    </div>
                                                </figure>
                                                <div class="caption-title">
                                                    <h3><a href="#">后台管理系统</a></h3>
                                                    <!-- <span>Branding, Print</span> -->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="projects-block col-md-6">
                                            <div class="inner-box">
                                                <figure class="image">
                                                    <img src="images/gallery/3.png" alt="image">
                                                    <div class="overlay">
                                                        <a class="lightbox-image option-btn" title="Image Caption Here"
                                                            data-fancybox-group="example-gallery"
                                                            href="images/gallery/3.png">
                                                            <i class="fa fa-search"></i>
                                                        </a>
                                                    </div>
                                                </figure>
                                                <div class="caption-title">
                                                    <h3><a href="#">静态网页</a></h3>
                                                    <span>网页</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="projects-block col-md-6">
                                            <div class="inner-box">
                                                <figure class="image">
                                                    <img src="images/gallery/4.png" alt="image">
                                                    <div class="overlay">
                                                        <a class="lightbox-image option-btn" title="Image Caption Here"
                                                            data-fancybox-group="example-gallery"
                                                            href="images/gallery/4.png">
                                                            <i class="fa fa-search"></i>
                                                        </a>
                                                    </div>
                                                </figure>
                                                <div class="caption-title">
                                                    <h3><a href="#">系统性响应式网站</a></h3>
                                                    <span>网站</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="projects-block col-sm-6">
                                            <div class="inner-box">
                                                <figure class="image">
                                                    <img src="images/gallery/5.png" alt="image">
                                                    <div class="overlay">
                                                        <a class="lightbox-image option-btn" title="Image Caption Here"
                                                            data-fancybox-group="example-gallery"
                                                            href="images/gallery/5.png">
                                                            <i class="fa fa-search"></i>
                                                        </a>
                                                    </div>
                                                </figure>
                                                <div class="caption-title">
                                                    <h3><a href="#">Echarts数据可视化平台</a></h3>
                                                    <span>Vue项目</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="projects-block col-sm-6">
                                            <div class="inner-box">
                                                <figure class="image">
                                                    <img src="images/gallery/6.png" alt="image">
                                                    <div class="overlay">
                                                        <a class="lightbox-image option-btn" title="Image Caption Here"
                                                            data-fancybox-group="example-gallery"
                                                            href="images/gallery/6.png">
                                                            <i class="fa fa-search"></i>
                                                        </a>
                                                    </div>
                                                </figure>
                                                <div class="caption-title">
                                                    <h3><a href="#">电商后台管理系统</a></h3>
                                                    <span>Vue项目</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end item -->
                            <!-- card item -->
                            <!-- end item -->
                            <!-- card item -->
                            <div class="card-contact card-item" id="contact"
                                style="background-image:url(images/background/2.jpg)">
                                <div class="card-inner">
                                    <h3 class="title">联系</h3>
                                    <h4>Keep In Touch</h4>
                                    <div class="row clearfix">
                                        <div class="col-md-6">
                                            <ul class="list-style-two">
                                                <li><span class="icon flaticon-signs"></span>安徽-安庆 <br> </li>
                                                <li><span class="icon flaticon-smartphone"></span>19159360236 <br></li>
                                                <li><span
                                                        class="icon flaticon-note-1"></span>fwl1962903162@163.com<br>1962903162@qq.com
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="map-section">
                                                <div class="home-google-map">
                                                    <div class="google-map" id="contact-google-map"
                                                        data-map-lat="40.700843" data-map-lng="-74.004012"
                                                        data-icon-path="images/icons/map-marker.png"
                                                        data-map-title="Chester" data-map-zoom="11">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <h4>How Can I Help?</h4>
                                <div class="contact-form">
                                    <form method="post" action="sendemail.php" id="contact-form">
                                        <div class="row clearfix">
                                            
                                            <div class="col-md-6 form-group">
                                                <input type="text" name="username" placeholder="Name" required>
                                            </div>
                                            
                                            <div class="col-md-6 form-group">
                                                <input type="email" name="email" placeholder="Email" required>
                                            </div>
                                            
                                            <div class="col-md-6 form-group">
                                                <input type="text" name="subject" placeholder="Subject" required>
                                            </div>

                                            <div class="col-md-6 form-group">
                                                <input type="text" name="phone" placeholder="Phone" required>
                                            </div>

                                            <div class="col-lg-12 col-md-12 form-group">
                                                <textarea name="message" placeholder="Message"></textarea>
                                            </div>
                                            
                                            <div class="col-lg-12 col-md-12 form-group">
                                                <button class="theme-btn btn-style-two" type="submit" name="submit-form">Submit Now </button>
                                            </div>
                                            
                                        </div>
                                    </form>
                                        
                                </div> -->
                                    <!--End Contact Form -->

                                </div>
                            </div>
                            <!-- end item -->

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <!--End pagewrapper-->
    <!-- 备案号 -->
    <div class="bottom">
        <a href="https://beian.miit.gov.cn/" target="_blank">皖ICP备2023000552号-1</a>
    </div>


    <script src="js/jquery.js"></script>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/owl.js"></script>
    <script src="js/wow.js"></script>
    <script src="js/appear.js"></script>
    <script src="js/jquery.fancybox.js"></script>
    <script src="js/element-in-view.js"></script>
    <script src="js/knob.js"></script>
    <script src="js/validate.js"></script>
    <script src="js/mousemoveparallax.js"></script>
    <script src="js/pagenav.js"></script>
    <script src="js/jquery-type.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src="js/particle-alone.js"></script>
    <script src="js/script.js"></script>

    <!--Google Map APi Key-->
    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyATY4Rxc8jNvDpsK8ZetC7JyN4PFVYGCGM"></script>
    <script src="js/gmaps.js"></script>
    <script src="js/map-script.js"></script>
    <!--End Google Map APi-->

</body>

</html>